<template>
	<view class="car-card" @click="handDetail">
		<view class="cover">
			<image :src="info.coverPlan" mode="aspectFill"></image>
		</view>
		<view class="info">
			<view class="name">{{ info.productName }}</view>
			<view class="desc">{{ info.brand }}{{ info.model }}</view>
			<view class="more" v-if="!isColl && !isNoStock">
				<view class="more-span">
					<text>库存</text>
					<text>{{ info.stock }}</text>
				</view>
				<view class="more-span">
					<text>销量</text>
					<text>{{ info.orderSum }}</text>
				</view>
			</view>
			<view class="tags">
				<view class="tag" v-if="info.powerType">{{ info.powerType }}</view>
				<view class="tag" v-if="info.mileage">{{ info.mileage }}</view>
				<view class="tag" v-if="info.fineness">{{ info.fineness }}</view>
				<view class="tag" v-if="info.chargingMode">{{ info.chargingMode }}</view>
			</view>
			<view class="bottom">
				<view class="bottom-prices">
					<text>{{ info.bedrockPrice }}</text>
					<text>元起/月</text>
				</view>
				<template v-if="isTui">
					<button class="cu-btn prive-btn">查看</button>
				</template>
				<template v-else>
					<button v-if="isColl" class="cu-btn" @click.stop="handCancel">取消收藏</button>
					<view class="logos" v-else>
						<image v-for="(item, index) in info.platform" :key="index" class="logo" :src="item.url" mode="">
						</image>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	const props = defineProps({
		isColl: {
			type: Boolean,
			default: false
		},
		isNoStock: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: () => {}
		},
		demandId: {
			type: Number,
			default: 0
		},
		isEdit: {
			type: Boolean,
			default: false
		},
		isTui: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['backInfo', 'cancel', 'onClick'])

	const handCancel = () => {
		emit('cancel')
	}
	const handDetail = () => {
		if (props.isEdit) {
			emit('onClick', props.info)
			return
		}
		let url = `/pagesA/car/detail?id=${props.info.id}`
		if (props.demandId) {
			url += `&demandId=${props.demandId}`
		}
		uni.navigateTo({
			url,
			events: {
				backInfo: (info) => {
					emit('backInfo', info)
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.car-card {
		display: flex;
		align-items: center;

		.cover {
			width: 234rpx;
			height: 234rpx;

			image {
				width: 234rpx;
				height: 234rpx;
			}
		}

		.info {
			flex: 1;
			margin-left: 24rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2D3341;
			}

			.desc {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.more {
				margin-top: 14rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;

				&-span {
					display: flex;
					align-items: center;

					text {
						&:last-child {
							margin-left: 10rpx;
							color: #FF930D;
						}
					}

					&:last-child {
						margin-left: 20rpx;
					}
				}
			}

			.tags {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;

				.tag {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding: 4rpx 8rpx;
					background: #F5F5F5;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				.bottom-prices {
					flex: 1;
					// width: 280rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #FF4600;
					display: flex;
					align-items: center;

					text {
						display: block;

						&:first-child {
							font-size: 40rpx;
						}
					}
				}

				.cu-btn {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					border-radius: 16rpx;
					border: 1rpx solid #707070;
					background-color: rgba(255, 255, 255, 0);
				}

				.prive-btn {
					background: #FFC434;
					border-color: #FFC434;
					color: #333333;
				}

				.logos {
					display: flex;
					align-items: center;

					.logo {
						margin-left: 10rpx;
						width: 37rpx;
						height: 37rpx;
					}
				}
			}
		}
	}
</style>